<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>对账</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .table-view {
            width: 100%;
            margin-bottom: 30px;
        }
        .margin-horizontal {
            margin: 0px 10px;
        }
        .margin-horizontal-plus {
            margin: 0px 50px;
        }
        .subreport-title {
            font-size: 16px;
            line-height: 48px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 20px;
        }
        .element-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content-container {
            width: 100%;
            overflow: auto;
        }
        .content-container .tab-menu {
            padding: 0px 20px;
            background: #F5F7FA;
            border-bottom: solid 1px #e6e6e6;
        }

        .content-container .tab-menu .tab-menu-ul {
            height: 40px;
            margin-top: 5px;
            background: #FFFFFF;
            border-top: 1px solid #DCDFE6;
            border-left: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            display: inline-block;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            float: left;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li {
            position: relative;
            display: inline-block;
            line-height: 40px;
            padding: 0px 24px;
            font-size: 14px;
            color: #303133;
            letter-spacing: 0;
            font-weight: bold;
            list-style: none;
            cursor: pointer;
            float: left;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li .el-icon-close {
            position: absolute;
            top: 5px;
            right: 5px;
            display: none;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li:hover .el-icon-close {
            display: inline-block;
            color: gray;
        }

        .content-container .tab-menu .tab-menu-ul .active {
            border-bottom: 1px solid #ffffff;
            color: #1989FA;
        }

        .content-container .tab-menu .tab-menu-ul .active .el-icon-close {
            color: #1989FA;
            display: inline-block;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li:not(:first-child) {
            border-left: 1px solid #DCDFE6;
        }

        .content-container .tab-menu .title {
            font-size: 22px;
            color: #000000;
            line-height: 22px;
            margin-right: 20px;
        }
        .content-container .operation-menu {
            border-bottom: 1px solid #DCDFE6;
        }

        .content-container .content-nav {
            background: #F5F7FA;
            height: 15px;
        }

        .content-container .operation-menu>div:not(:last-child) {
            border-bottom: 1px solid #DCDFE6;
        }

        .content-container .operation-menu .operation-menu__button {
            padding: 10px 20px;
        }

        .content-container .operation-menu .operation-menu__search {
            padding: 10px 20px 0px 20px;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item {
            float: left;
            display: inline-block;
            margin: 0px 20px 10px 0px;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .label {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            line-height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .search-input {
            display: inline-block;
        }

        .content-container .muti-table {
            background: #FFFFFF;
        }

        .content-container .muti-table .table-row {
            padding: 8px 0px;
            padding-left: 20px;
            border-bottom: solid 1px #e6e6e6;
            word-break: break-all;
        }

        .content-container .muti-table .table-row .muti-table__table-cell {
            padding: 0px 10px;
            box-sizing: border-box;
        }

        .content-container .muti-table .table-row__sep {
            padding: 8px 0px;
        }

        .content-container .muti-table .table-row__left .muti-table__table-cell {
            line-height: 100%
        }

        .content-container .muti-table .table-th {
            font-size: 14px;
            color: #909399;
            letter-spacing: 0;
            text-align: left;
            line-height: 16px;
            font-weight: bold;
        }

        .content-container .muti-table .content-row {
            font-size: 14px;
            color: #606266;
            letter-spacing: 0;
            text-align: left;
            line-height: 14px;
        }

        .content-container .muti-table .content-row:hover {
            background: #eeeeee;
        }

        .content-container .muti-table .table-row__left {
            min-width: 380px;
            width: 25%
        }

        .content-container .muti-table .table-row .revenue-cell {
            width: 120px;
            padding-left: 0px;
            text-align: center;
            line-height: 28px;
        }

        .content-container .muti-table .table-row .order-operator-cell {
            width: 300px;
            padding-left: 0px;
            text-align: center;
        }
    </style>
</head>

<body style="display: none;">
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>对账列表</div>
                <div flex-box="1">
                    <ul class="tab-menu-ul">
                        <li class="tab-menu-li active">瑜曼伊人
                            <i class="el-icon-close"></i>
                        </li>
                        <li class="tab-menu-li">金宝贝
                            <i class="el-icon-close"></i>
                        </li>
                        <li class="tab-menu-li">吉健
                            <i class="el-icon-close"></i>
                        </li>
                    </ul>
                </div>
                <div flex-box="0" class="opt-area">
                    <el-button type="default" icon="el-icon-circle-plus-outline" size="mini">商家对账列表</el-button>
                </div>
            </div>
            <div flex-box="1">
                <div class="operation-menu">
                    <div class="operation-menu__button" flex>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0" class="search-condition">
                                    <div class="search-item">
                                        <span class="label">月份</span>
                                        <div class="search-input">
                                            <el-date-picker v-model="enterDate" type="date" placeholder="选择日期" size="small">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                </div>
                                <div flex-box="0">
                                    <el-button type="primary" size="small">查询</el-button>
                                </div>
                            </div>
                        </div>
                        <div flex-box="0" class="element-center">
                            <el-button type="primary" size="small" icon="el-icon-refresh" plain @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">刷新</el-button>
                            <el-button type="primary" size="small" icon="el-icon-download" plain>导出</el-button>
                        </div>
                    </div>
                </div>
                <div class="content-nav"></div>
                <div class="muti-table">
                    <div class="table-th table-row" flex>
                        <div class="table-row__sep" flex>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell">基础费用</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">本月悦健康营收</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">本月悦健康代收</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">待转款</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">对账状态</div>
                            <div flex-box="0" class="muti-table__table-cell order-operator-cell margin-horizontal">操作</div>
                        </div>
                    </div>
                    <div class="content-row table-row" flex>
                        <div class="table-row__sep" flex>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell">12333</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">5555</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">4444444</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">46666666</div>
                            <div flex-box="0" class="muti-table__table-cell revenue-cell margin-horizontal">未对账</div>
                            <div flex-box="0" class="muti-table__table-cell order-operator-cell margin-horizontal" flex="cross:center">
                                <el-button size="mini">重新生成对账表</el-button>
                                <el-button size="mini">发起商家确认</el-button>
                                <el-button size="mini">封存本月订单</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="operation-menu">
                    <div class="operation-menu__button" flex>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0" class="search-condition">
                                    <div class="search-item">
                                        <span class="label">本月调账金额</span>
                                        <div class="search-input">
                                            <el-input v-model="username" placeholder="" size="small"></el-input>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <span class="label">本月调账备注</span>
                                        <div class="search-input" style="width: 600px;">
                                            <el-input v-model="username" placeholder="" size="small"></el-input>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-nav"></div>
                 <el-section-pannel title="线上订单列表" title-padding="0px 0px 0px 20px">
                    <div slot="content" class="custom-content">
                         <div class="table-view">
                    <el-table :data="tableData" height="250">
                        <el-table-column prop="month" label="月份" width="150">
                        </el-table-column>
                        <el-table-column label="商家信息">
                            <el-table-column prop="sellerType" label="商家分类" width="120"></el-table-column>
                            <el-table-column prop="branchName" label="分店名称" width="120"></el-table-column>
                        </el-table-column>
                        <el-table-column label="订单信息">
                            <el-table-column prop="orderDate" label="订单日期" width="120"></el-table-column>
                            <el-table-column prop="activityName" label="活动名称" width="120"></el-table-column>
                            <el-table-column prop="projectName" label="项目名称" width="120"></el-table-column>
                            <el-table-column prop="orderNo" label="订单编号" width="120"></el-table-column>
                        </el-table-column>
                        <el-table-column label="商品基本信息">
                            <el-table-column prop="unitPrice" label="商品销售单价" width="120"></el-table-column>
                            <el-table-column prop="number" label="数量" width="120"></el-table-column>
                            <el-table-column prop="discount" label="优惠金额" width="120"></el-table-column>
                            <el-table-column prop=payPrice label="实际实付金额" width="120"></el-table-column>
                        </el-table-column>
                        <el-table-column label="用户信息（见下面备注）">
                            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                            <el-table-column prop="tel" label="电话" width="120"></el-table-column>
                            <el-table-column prop="babyDue" label="预产期" width="120"></el-table-column>
                        </el-table-column>
                        <el-table-column label="计算基本信息">
                            <el-table-column prop="experienceDate" label="体验时间" width="120"></el-table-column>
                            <el-table-column prop="ifRepeat" label="是否重复名单" width="120"></el-table-column>
                            <el-table-column prop="offlineConsumeType" label="线下消费类目" width="120"></el-table-column>
                            <el-table-column prop="balanceScale" label="结算比例" width="120"></el-table-column>
                            <el-table-column prop="balanceMoney" label="结算金额" width="120"></el-table-column>
                            <el-table-column prop="ifAccountAdjustment" label="是否调账订单" width="120"></el-table-column>
                            <el-table-column prop="remarks" label="备注" width="120"></el-table-column>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button type="default" size="small">调账</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                     </div>
                </el-section-pannel>
                
                
                <el-section-pannel title="线下转化列表" title-padding="0px 0px 0px 20px">
                     <div slot="content" class="custom-content">
                            <div class="table-view">
                    <el-table :data="tableData1" height="250">
                        <el-table-column prop="month" label="月份" width="150"></el-table-column>
                        <el-table-column prop="sellerType" label="商家分类" width="150"></el-table-column>
                        <el-table-column prop="branchName" label="分店名称" width="150"></el-table-column>
                        <el-table-column prop="orderDate" label="订单日期" width="150"></el-table-column>
                        <el-table-column prop="activityName" label="活动名称" width="150"></el-table-column>
                        <el-table-column prop="projectName" label="项目名称" width="150"></el-table-column>
                        <el-table-column prop="orderNo" label="订单编号" width="150"></el-table-column>
                        <el-table-column prop="unitPrice" label="商品销售单价" width="150"></el-table-column>
                        <el-table-column prop="number" label="数量" width="150"></el-table-column>
                        <el-table-column prop="discount" label="优惠金额" width="150"></el-table-column>
                        <el-table-column prop="payPrice" label="实际支付金额" width="150"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="tel" label="电话" width="150"></el-table-column>
                        <el-table-column prop="babyDue" label="预产期" width="150"></el-table-column>
                        <el-table-column prop="experienceDate" label="体验时间" width="150"></el-table-column>
                        <el-table-column prop="ifRepeat" label="是否重复名单" width="150"></el-table-column>
                        <el-table-column prop="offlinePaymentType" label="线下消费类目" width="150"></el-table-column>
                        <el-table-column prop="balanceScale" label="结算比例" width="150"></el-table-column>
                        <el-table-column prop="balanceMoney" label="结算金额" width="150"></el-table-column>
                        <el-table-column prop="ifAccountAdjustment" label="是否调账订单" width="150"></el-table-column>
                        <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                            <el-button type="default" size="small">调账</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
                     </div>
                </el-section-pannel>
                
                 <el-section-pannel title="漏单明细列表" title-padding="0px 0px 0px 20px">
                     <div slot="content" class="custom-content">
                         <div class="table-view">
                    <el-table :data="tableData1" height="250">
                        <el-table-column prop="month" label="月份" width="150"></el-table-column>
                        <el-table-column prop="sellerType" label="商家分类" width="150"></el-table-column>
                        <el-table-column prop="branchName" label="分店名称" width="150"></el-table-column>
                        <el-table-column prop="orderDate" label="订单日期" width="150"></el-table-column>
                        <el-table-column prop="activityName" label="活动名称" width="150"></el-table-column>
                        <el-table-column prop="projectName" label="项目名称" width="150"></el-table-column>
                        <el-table-column prop="orderNo" label="订单编号" width="150"></el-table-column>
                        <el-table-column prop="unitPrice" label="商品销售单价" width="150"></el-table-column>
                        <el-table-column prop="number" label="数量" width="150"></el-table-column>
                        <el-table-column prop="discount" label="优惠金额" width="150"></el-table-column>
                        <el-table-column prop="payPrice" label="实际支付金额" width="150"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="tel" label="电话" width="150"></el-table-column>
                        <el-table-column prop="babyDue" label="预产期" width="150"></el-table-column>
                        <el-table-column prop="experienceDate" label="体验时间" width="150"></el-table-column>
                        <el-table-column prop="ifRepeat" label="是否重复名单" width="150"></el-table-column>
                        <el-table-column prop="offlinePaymentType" label="线下消费类目" width="150"></el-table-column>
                        <el-table-column prop="balanceScale" label="结算比例" width="150"></el-table-column>
                        <el-table-column prop="balanceMoney" label="结算金额" width="150"></el-table-column>
                        <el-table-column prop="ifAccountAdjustment" label="是否调账订单" width="150"></el-table-column>
                        <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button type="default" size="small">调账</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                     </div>
                </el-section-pannel>
                
                
            </div>
        </div>
        </el-admin-menu>
    </div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                tableData: [{
                    month: '2016-05-03',
                    sellerType: '王小虎',
                    branchName: '上海',
                    orderDate: '普陀区',
                    activityName: '上海市普陀区金沙江路 1518 弄',
                    projectName: 200333,
                    orderNo: '2016-05-03',
                    unitPrice: '王小虎',
                    number: '上海',
                    discount: '普陀区',
                    payPrice: '上海市普陀区金沙江路 1518 弄',
                    name: 200333,
                    tel: '2016-05-03',
                    babyDue: '王小虎',
                    experienceDate: '上海',
                    ifRepeat: '普陀区',
                    offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                    balanceScale: 200333,
                    balanceMoney: '2016-05-03',
                    ifAccountAdjustment: '王小虎',
                    remarks: '上海',
                },
                    {
                        month: '2016-05-03',
                        sellerType: '王小虎',
                        branchName: '上海',
                        orderDate: '普陀区',
                        activityName: '上海市普陀区金沙江路 1518 弄',
                        projectName: 200333,
                        orderNo: '2016-05-03',
                        unitPrice: '王小虎',
                        number: '上海',
                        discount: '普陀区',
                        payPrice: '上海市普陀区金沙江路 1518 弄',
                        name: 200333,
                        tel: '2016-05-03',
                        babyDue: '王小虎',
                        experienceDate: '上海',
                        ifRepeat: '普陀区',
                        offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                        balanceScale: 200333,
                        balanceMoney: '2016-05-03',
                        ifAccountAdjustment: '王小虎',
                        remarks: '上海',
                    },
                    {
                        month: '2016-05-03',
                        sellerType: '王小虎',
                        branchName: '上海',
                        orderDate: '普陀区',
                        activityName: '上海市普陀区金沙江路 1518 弄',
                        projectName: 200333,
                        orderNo: '2016-05-03',
                        unitPrice: '王小虎',
                        number: '上海',
                        discount: '普陀区',
                        payPrice: '上海市普陀区金沙江路 1518 弄',
                        name: 200333,
                        tel: '2016-05-03',
                        babyDue: '王小虎',
                        experienceDate: '上海',
                        ifRepeat: '普陀区',
                        offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                        balanceScale: 200333,
                        balanceMoney: '2016-05-03',
                        ifAccountAdjustment: '王小虎',
                        remarks: '上海',
                    },
                    {
                        month: '2016-05-03',
                        sellerType: '王小虎',
                        branchName: '上海',
                        orderDate: '普陀区',
                        activityName: '上海市普陀区金沙江路 1518 弄',
                        projectName: 200333,
                        orderNo: '2016-05-03',
                        unitPrice: '王小虎',
                        number: '上海',
                        discount: '普陀区',
                        payPrice: '上海市普陀区金沙江路 1518 弄',
                        name: 200333,
                        tel: '2016-05-03',
                        babyDue: '王小虎',
                        experienceDate: '上海',
                        ifRepeat: '普陀区',
                        offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                        balanceScale: 200333,
                        balanceMoney: '2016-05-03',
                        ifAccountAdjustment: '王小虎',
                        remarks: '上海',
                    }],
                tableData1: [{
                    month: '2016-05-03',
                    sellerType: '王小虎',
                    branchName: '上海',
                    orderDate: '普陀区',
                    activityName: '上海市普陀区金沙江路 1518 弄',
                    projectName: 200333,
                    orderNo: '2016-05-03',
                    unitPrice: '王小虎',
                    number: '上海',
                    discount: '普陀区',
                    payPrice: '上海市普陀区金沙江路 1518 弄',
                    name: 200333,
                    tel: '2016-05-03',
                    babyDue: '王小虎',
                    experienceDate: '上海',
                    ifRepeat: '普陀区',
                    offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                    balanceScale: 200333,
                    balanceMoney: '2016-05-03',
                    ifAccountAdjustment: '王小虎',
                    remarks: '上海',
                },
                    {
                        month: '2016-05-03',
                        sellerType: '王小虎',
                        branchName: '上海',
                        orderDate: '普陀区',
                        activityName: '上海市普陀区金沙江路 1518 弄',
                        projectName: 200333,
                        orderNo: '2016-05-03',
                        unitPrice: '王小虎',
                        number: '上海',
                        discount: '普陀区',
                        payPrice: '上海市普陀区金沙江路 1518 弄',
                        name: 200333,
                        tel: '2016-05-03',
                        babyDue: '王小虎',
                        experienceDate: '上海',
                        ifRepeat: '普陀区',
                        offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                        balanceScale: 200333,
                        balanceMoney: '2016-05-03',
                        ifAccountAdjustment: '王小虎',
                        remarks: '上海',
                    },
                    {
                        month: '2016-05-03',
                        sellerType: '王小虎',
                        branchName: '上海',
                        orderDate: '普陀区',
                        activityName: '上海市普陀区金沙江路 1518 弄',
                        projectName: 200333,
                        orderNo: '2016-05-03',
                        unitPrice: '王小虎',
                        number: '上海',
                        discount: '普陀区',
                        payPrice: '上海市普陀区金沙江路 1518 弄',
                        name: 200333,
                        tel: '2016-05-03',
                        babyDue: '王小虎',
                        experienceDate: '上海',
                        ifRepeat: '普陀区',
                        offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                        balanceScale: 200333,
                        balanceMoney: '2016-05-03',
                        ifAccountAdjustment: '王小虎',
                        remarks: '上海',
                    },
                    {
                        month: '2016-05-03',
                        sellerType: '王小虎',
                        branchName: '上海',
                        orderDate: '普陀区',
                        activityName: '上海市普陀区金沙江路 1518 弄',
                        projectName: 200333,
                        orderNo: '2016-05-03',
                        unitPrice: '王小虎',
                        number: '上海',
                        discount: '普陀区',
                        payPrice: '上海市普陀区金沙江路 1518 弄',
                        name: 200333,
                        tel: '2016-05-03',
                        babyDue: '王小虎',
                        experienceDate: '上海',
                        ifRepeat: '普陀区',
                        offlineConsumeType: '上海市普陀区金沙江路 1518 弄',
                        balanceScale: 200333,
                        balanceMoney: '2016-05-03',
                        ifAccountAdjustment: '王小虎',
                        remarks: '上海',
                    },
                    ],
                username: '',
                enterDate: '',
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail,
                fullscreenLoading: false,
            }
        },
        methods: {
            logout() {
                window.location.href = 'login.html';
            },
            openFullScreen() {
                let that = this;
                that.fullscreenLoading = true;
                setTimeout(function() {
                    that.fullscreenLoading = false;
                }, 2000);
            },
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });
</script>
</html>
